<template>
  <div class="allCustomersDetailsCont" id="watermarkDetails">
    <div class="tipBox">
      <div class="tips" v-if="goVisitrFlag">
        <p>
          <Icon type="ios-alert" size="24" color="#2d8cf0" />
          客户已于{{ basicInformatData.visitDate }}到访，由{{ basicInformatData.receptionist }}接待
        </p>
        <p>
          <span class="goCustomer" @click="goVisited">查看客户详情</span>
          <span>
            <Icon type="md-close" size="24" color="#2d8cf0" class="closeClass" @click="visitedClose" />
          </span>
        </p>
      </div>
    </div>
    <div class="tipBox tipBox1">
      <div class="tips" v-if="goAdviserFlag && basicInformatData.hereto == 1">
        <p>
          <Icon type="ios-alert" size="24" color="#2d8cf0" />
          该线索客户有多个顾问正在跟进
        </p>
        <p>
          <span class="goCustomer" @click="moreCounselorRecord">查看顾问详情</span>
          <span>
            <Icon type="md-close" size="24" color="#2d8cf0" class="closeClass" @click="adviserClose" />
          </span>
        </p>
      </div>
    </div>
    <div class="tipBox tipBox1">
      <div class="tips" v-if="clueChannelFlag">
        <p>
          <Icon type="ios-alert" size="24" color="#2d8cf0" />
          该线索客户有多个来源渠道：{{ clueChannelData }}
        </p>
        <p>
          <span class="goCustomer" @click="clueChannelDetails">查看渠道详情</span>
          <span>
            <Icon type="md-close" size="24" color="#2d8cf0" class="closeClass" @click="clueChannelClose" />
          </span>
        </p>
      </div>
    </div>
    <!-- 客户进度-->
    <div class="customerProgress clearfix">
      <div class="customerInfo">
        <span class="avatar">
          <img
            v-if="basicInformatData && (basicInformatData.gender == '男' || basicInformatData.gender == '1')"
            src="@/assets/images/boy.png"
            alt="" />
          <img
            v-else-if="
              basicInformatData && (basicInformatData.gender == '女' || basicInformatData.gender == '2')
            "
            src="@/assets/images/girl.png"
            alt="" />
          <img v-else src="https://dev-images.tospurfang.com/5e0b244cedcd4e75980cc8970b2315ad.png" alt="" />
        </span>
        <span class="avatarSan">
          {{ basicInformatData.customerName || '-' }}
        </span>
        <span class="avatarSan">{{ basicInformatData.customerPhone }}</span>
        <span class="huang" v-if="detailsParams.flag != 'clue' && basicInformatData.status == '首访'">
          {{ basicInformatData.status }}
        </span>

        <span class="huang" v-if="detailsParams.flag != 'clue' && basicInformatData.isClueVisit == 1">
          线索转到访
        </span>

        <span class="huang" v-if="detailsParams.flag != 'clue' && basicInformatData.overdueStatus == 1">
          即将过期
        </span>
        <span class="huang" v-if="detailsParams.flag != 'clue' && basicInformatData.overdueStatus == 2">
          已过期
        </span>

        <span class="lan" v-if="detailsParams.flag == 'clue'">线索客户</span>
        <span
          class="lan"
          v-if="detailsParams.flag == 'clue' && basicInformatData.hereto"
          :class="{ curr: basicInformatData.hereto != 1 }">
          {{
            basicInformatData.hereto == 1 ? '未到访' : basicInformatData.hereto == 2 ? '已到访' : '他人到访'
          }}
        </span>

        <!-- <span class="lan curr"
          v-if="detailsParams.flag == 'clue'&&basicInformatData.isEffectiveStatus=='无效客户'">{{ basicInformatData.isEffective}}</span> -->
        <span class="lan curr" v-if="basicInformatData.isEffectiveStatus == '2'">无效客户</span>
        <span class="lan curr" v-if="detailsParams.isBind">已绑定</span>

        <!-- <span class="avatarSan" v-if="detailsParams && detailsParams.hasAttention"> -->
        <span class="avatarSan" v-if="!detailsParams.big">
          <Button @click="getChangeAttention">
            <Icon :type="iconFlag" />
            {{ iconFlag == 'md-add' ? '关注' : '已关注' }}
          </Button>
        </span>
        <!-- 线索列表到详情才展示分配按钮 -->
        <span class="avatarSan" v-if="basicInformatData.assignCustomerStatus == 1 && unlocking('0101020700')">
          <Button type="primary" @click="onAllot">分配客户</Button>
        </span>
        <span
          class="avatarSan"
          v-if="basicInformatData.assignPrivateCustomerStatus == 1 && unlocking('0101020200')">
          <Button type="primary" @click="onAllot">分配私客</Button>
        </span>
        <span class="avatarSan" v-if="setInvalidBtn && !detailsParams.big">
          <Button type="primary" @click="setInvalidFun">设为无效</Button>
        </span>
      </div>
      <div class="customer_feature">
        <span class="label_customer_feature">客户特征：</span>
        {{ basicInformatData.customerFeature || '-' }}
      </div>
      <div class="customer_feature" v-if="featureImages.length">
        <div class="feature_images">
          <div class="feature_images_list" v-for="(item, index) in featureImages" :key="index">
            <img :src="item.url" />
            <div class="feature_images_list_cover">
              <Icon type="ios-eye-outline" @click="handleView(index)"></Icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--个人信息展示-->
    <Tabs v-model="personalInformation" :animated="false">
      <TabPane class="tab_pane" label="客户信息" name="BasicInformation" v-if="essentialInformation">
        <!-- 基本信息 -->
        <BasicHomeCustomer
          :comNames="'BasicInformation'"
          :culeFlag="detailsParams.flag"
          :big="detailsParams.big"
          @clueChannelDetails="clueChannelDetails"
          :basicInformatData="basicInformatData"
          :standingBookGetGroup="standingBookGetGroup"
          @editChannel="oneEitChannel"></BasicHomeCustomer>
        <!-- 置业需求 -->
        <BasicHomeCustomer
          :comNames="'HomeDemand'"
          :basicInformatData="basicInformatData"
          :standingBookGetGroup="standingBookGetGroup"></BasicHomeCustomer>
        <!-- 服务信息 -->
        <BasicHomeCustomer
          :comNames="'ServiceInformation'"
          :culeFlag="detailsParams.flag"
          :basicInformatData="basicInformatData"
          :standingBookGetGroup="standingBookGetGroup"></BasicHomeCustomer>
        <!-- 客户画像 -->
        <BasicHomeCustomer
          :comNames="'CustomerPortrait'"
          :basicInformatData="basicInformatData"
          :standingBookGetGroup="standingBookGetGroup"></BasicHomeCustomer>
      </TabPane>

      <TabPane label="跟进&批注" name="FollowUpRecord" v-if="customeFollowUp">
        <DetailsFollowUpRecord
          :servicePersonnelId="servicePersonnelObj"
          :detailsParams="detailsParams"
          v-if="personalInformation === 'FollowUpRecord'"></DetailsFollowUpRecord>
      </TabPane>

      <TabPane label="客户动态" name="CustomerTrajectory" v-if="CustomerLocus">
        <DetailsCustomerTrajectory
          :servicePersonnelId="servicePersonnelObj"
          :detailsParams="detailsParams"
          v-if="personalInformation === 'CustomerTrajectory'"></DetailsCustomerTrajectory>
      </TabPane>
    </Tabs>
    <!-- 图片放大 -->
    <preview-image
      ref="previewImage"
      :images="preview.images"
      :showDownLoad="true"
      :showIndex="preview.showIndex" />

    <more-modal ref="moreModal" @getDetail="getDetail" />
    <clue-channel-more ref="clueChannelMore" />

    <channel-modal ref="channelModal" @change="onChangeChannel"></channel-modal>
    <!-- 设为无效 -->
    <set-invalid ref="setInvalid" @success="onInvalidSuccess" />

    <allot-modal ref="allot" @assignSuccess="assignSuccess" />
  </div>
</template>
<script>
  import DetailsCustomerTrajectory from './components/DetailsCustomerTrajectory'
  import DetailsFollowUpRecord from './components/DetailsFollowUpRecord'
  import BasicHomeCustomer from './components/BasicHomeCustomer'
  import watermark from '@/common/waterMark'
  import userMgr from '@/biz/user'
  import customerMgr from '@/biz/customer/customer'
  import clueCustomerMgr from '@/biz/customer/clueCustomer.js'
  import moreModal from './visitRecord/components/moreModal.vue'
  import clueChannelMore from './components/clueChannelMore.vue'
  import channelModal from './components/channel-modal.vue'
  import setInvalid from './components/setInvalid.vue'
  import allotModal from './assign/components/allot-modal.vue'
  import building from '@/biz/building'
  export default {
    props: {
      detailsParams: {
        type: Object,
        default: () => {
          return null
        }
      }
    },
    components: {
      DetailsCustomerTrajectory,
      DetailsFollowUpRecord,
      BasicHomeCustomer,
      moreModal,
      clueChannelMore,
      channelModal,
      setInvalid,
      allotModal
    },

    data() {
      return {
        iconFlag: 'md-add',
        customeFollowUp: false,
        CustomerLocus: false,
        essentialInformation: false,
        servicePersonnelObj: {
          servicePersonnelVal: '',
          caseId: '',
          customerType: '',
          buildingId: '',
          cityCode: '',
          phone: ''
        },
        basicInformatData: {},
        personalInformation: 'BasicInformation',
        standingBookGetGroup: [],
        preview: {
          images: [],
          showIndex: 0
        },
        featureImages: [],
        goAdviserFlag: false,
        clueChannelFlag: false,
        clueChannelData: '',
        goVisitrFlag: false
      }
    },
    computed: {
      //设置无效展示规则 1. isMaskPhone != 1 2. is_Invalid：线索客户列表点击查看详情 3.权限code 0101021000
      // setInvalidBtn() {
      //   return this.basicInformatData.isMaskPhone != 1 && this.detailsParams.is_Invalid && this
      //     .unlocking('0101021000')
      // }
      // 线索待分配才能设置无效
      setInvalidBtn() {
        return (
          !this.basicInformatData.userId &&
          this.basicInformatData.isEffectiveStatus == '1' &&
          this.basicInformatData.hereto == '1' &&
          this.unlocking('0101021000')
        )
      }
    },
    methods: {
      setInvalidFun() {
        this.$refs.setInvalid.show({
          userCustomerId: this.basicInformatData.userCustomerId
        })
      },
      onInvalidSuccess() {
        //设置无效客户完成 关闭客户详情弹窗
        this.$emit('change', { closeModal: true })
      },
      // 分配按钮
      assignSuccess() {
        this.initData()
        if (this.detailsParams.flag == 'clue') {
          this.isMoreCounselor()
        }
      },
      onAllot() {
        // let obj = {
        //   relationClueChannel: this.basicInformatData.relationClueChannel,
        //   userCustomerId: this.basicInformatData.userCustomerId,
        //   isMaskPhone: this.basicInformatData.isMaskPhone,
        //   sourceType: this.basicInformatData.sourceType,
        //   isPrivacy: this.basicInformatData.isPrivacy
        // }
        // this.$emit('distribution', obj)
        let obj = {
          userCustomerId: [this.basicInformatData.userCustomerId],
          showTab: this.basicInformatData.isPrivacy ? 1 : 2,
          source: 1,
          assignAll: false,
          screening: null
        }
        this.$refs.allot.show(obj)
      },
      visitedClose() {
        this.goVisitrFlag = false
      },
      // 由他人到访的客户，从线索客户到到访客户
      goVisited() {
        this.detailsParams.customerId = this.basicInformatData.customerId
        this.detailsParams.userCustomerId = this.basicInformatData.visitUserCustomerId
        this.detailsParams.flag = ''
        this.initData()
        this.isMoreCounselor()
        // this.$refs.moreModal.hide()
      },
      // 查看渠道详情
      clueChannelDetails() {
        this.$refs.clueChannelMore.show(this.basicInformatData.clueSourceChannel)
      },
      getDetail(rows) {
        this.detailsParams.customerId = rows.customerId
        this.detailsParams.userCustomerId = rows.userCustomerId
        this.initData()
        this.isMoreCounselor()
        this.$refs.moreModal.hide()
        console.log(rows, this.detailsParams, 'vvvvvvvvv')
      },
      moreCounselorRecord() {
        let customerId = this.detailsParams ? this.detailsParams.customerId : this.$route.query.customerId
        let buildingId = this.detailsParams.buildingId ? this.detailsParams.buildingId : ''
        this.$refs.moreModal.show(customerId, buildingId)
      },
      adviserClose() {
        this.goAdviserFlag = false
      },
      clueChannelClose() {
        this.clueChannelFlag = false
      },
      // 顾问
      isMoreCounselor() {
        let params = {
          customerId: this.detailsParams ? this.detailsParams.customerId : this.$route.query.customerId,
          buildingId: this.detailsParams.buildingId
        }
        clueCustomerMgr.isMoreCounselor(params).then((res) => {
          if (res) {
            this.goAdviserFlag = true
          }
        })
      },

      handleView(index) {
        this.preview.images = this.featureImages.map((i) => i.url)
        this.preview.showIndex = index
        this.$refs.previewImage.show()
      },
      // 关注
      getChangeAttention(val) {
        let params = {
          buildingId: this.detailsParams ? this.detailsParams.buildingId : this.$route.query.buildingId,
          roleId: userMgr.info().role.roleId,
          userCustomerId: this.detailsParams
            ? this.detailsParams.userCustomerId
            : this.$route.query.userCustomerId,
          userId: userMgr.info().userId
        }
        customerMgr.changeAttention(params).then((res) => {
          if (res == 1) {
            this.iconFlag = 'md-checkmark'
            this.$Message.success('成功收藏该客户。')
          } else {
            this.iconFlag = 'md-add'
            this.$Message.success('你取消收藏了该客户。')
          }
          this.$emit('change')
        })
      },
      customerInfo() {
        let params = {
          roleId: userMgr.info().role.roleId,
          userCustomerId: this.detailsParams
            ? this.detailsParams.userCustomerId
            : this.$route.query.userCustomerId,
          type: '1',
          userId: userMgr.info().userId,
          historyInfoId: '',
          buildingId: this.detailsParams ? this.detailsParams.buildingId : this.$route.query.buildingId,
          customerId: this.detailsParams ? this.detailsParams.customerId : this.$route.query.customerId
        }
        if (this.detailsParams.flag == 'clue') {
          return clueCustomerMgr.customerInfo(params)
        } else {
          return customerMgr.getCustomerInfoAll(params)
        }
      },
      initData() {
        // 基本信息
        this.customerInfo().then((res) => {
          if (res) {
            let featurePhoto = res.featurePhoto ? res.featurePhoto.split(',') : []
            featurePhoto.forEach((item) => {
              if (item) {
                this.featureImages.push({ url: item })
              }
            })
            this.basicInformatData = { ...res }
            this.iconFlag = this.basicInformatData.hasAttention == 1 ? 'md-checkmark' : 'md-add'
            if (this.detailsParams ? this.detailsParams.isFollow : this.$route.query.isFollow) {
              this.personalInformation = 'FollowUpRecord'
            } else {
              this.personalInformation = 'BasicInformation'
            }
            if (this.detailsParams.flag == 'clue' && this.basicInformatData.hereto == 3) {
              this.goVisitrFlag = true
            } else {
              this.goVisitrFlag = false
            }

            if (
              this.basicInformatData.clueSourceChannel &&
              JSON.parse(this.basicInformatData.clueSourceChannel).length > 1 &&
              this.detailsParams.flag == 'clue'
            ) {
              this.clueChannelFlag = true
              let arrClueChannel = []
              JSON.parse(this.basicInformatData.clueSourceChannel).forEach((item) => {
                arrClueChannel.push(item.channelName)
              })
              this.clueChannelData = arrClueChannel.join('、')
            } else {
              this.clueChannelFlag = false
            }
            if (this.detailsParams.flag == 'clue') {
              customerMgr
                .customerHeadClueList({
                  buildingId: this.detailsParams
                    ? this.detailsParams.buildingId
                    : this.$route.query.buildingId,
                  type: 1
                })
                .then((res) => {
                  this.initDataInfoAll()
                })
            } else {
              customerMgr
                .customerHeadList({
                  buildingId: this.detailsParams
                    ? this.detailsParams.buildingId
                    : this.$route.query.buildingId
                })
                .then((res) => {
                  this.initDataInfoAll()
                })
            }
          }
        })
      },

      // 初始化表头数据
      initDataInfoAll() {
        customerMgr
          .getstandingBookGetGroup({
            buildingId: this.detailsParams ? this.detailsParams.buildingId : this.$route.query.buildingId,
            type: 2
          })
          .then((res) => {
            this.standingBookGetGroup = res
            this.essentialInformation = true
            this.customeFollowUp = true
            this.CustomerLocus = true
          })
      },
      oneEitChannel() {
        this.$refs.channelModal.show(this.basicInformatData)
      },
      onChangeChannel() {
        this.$emit('change')
        this.initData()
      }
    },

    created() {
      console.log(this.detailsParams, 'detailsParams')
      this.initData()
      if (this.detailsParams.flag == 'clue') {
        this.isMoreCounselor()
      }
    },
    mounted() {
      let dom = document.getElementById('watermarkDetails')
      watermark.set(dom)
    }
  }
</script>
<style lang="scss" scoped>
  .allCustomersDetailsCont {
    height: 80vh;
    overflow-y: auto;
    padding: 14px;

    .ivu-tabs {
      overflow: visible;
    }

    .customerProgress {
      margin: 14px 0;

      .customer_feature {
        width: 100%;
        font-size: 16px;
        line-height: 25px;
        margin-top: 15px;
        float: left;

        .label_customer_feature {
          font-size: 18px;
          color: #194fe8;
        }

        .feature_images {
          .feature_images_list {
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .feature_images_list_cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);

            i {
              color: #fff;
              font-size: 20px;
              cursor: pointer;
              margin: 0 2px;
            }
          }

          .feature_images_list:hover .feature_images_list_cover {
            display: block;
          }
        }
      }

      .customerInfo {
        float: left;
        line-height: 40px;
        display: flex;

        .avatarSan {
          margin: 0 14px;
        }

        .avatar {
          display: inline-block;
          width: 40px;
          height: 40px;
          position: relative;
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            display: block;
          }

          strong {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 100%;
            height: 14px;
            line-height: 14px;
            text-align: center;
            font-weight: normal;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.4);
            font-size: 12px;
          }
        }
      }

      .customerStep {
        float: left;
        width: 760px;
        margin-left: 40px;
        margin-top: 12px;
      }

      .subscribeClass {
        float: left;
        margin-left: 40px;
        margin-top: 4px;
      }
    }
  }

  .clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .tab_pane {
    ::v-deep .ivu-form-item-label {
      color: #999999;
      width: 120px;
    }
  }

  .tipBox {
    display: block;
  }

  .tipBox1 {
    margin-top: 10px;
  }

  .tips {
    background: rgba(254, 252, 236, 1);
    display: block;
    width: 705px;
    padding: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    span {
      color: #2d8cf0;
      margin-right: 20px;
    }
  }

  .closeClass {
    vertical-align: -5px;
    cursor: pointer;
  }

  .goCustomer {
    cursor: pointer;
  }

  .lan {
    color: #2d8cf0;
    border: 1px solid #2d8cf0;
    margin-left: 10px;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    margin-top: 6px;
  }

  .lan.curr {
    color: #999;
    border: 1px solid #999;
  }

  .huang {
    color: #ff9900;
    border: 1px solid #ff9900;
    margin-left: 10px;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
    margin-top: 6px;
  }
</style>
